[iOS][Swift3.0] UIViewControllerのトランジションを手軽にカスタマイズできるJelly

今回は、手軽にUIViewControllerのトランジションをカスタマイズできるJellyを試してみました。 下記は同じ画面を呼び出していますが、呼び出し先の画面サイズやトランジションを変えているため、受ける印象はだいぶ違うのではないでしょうか？

JellyのライセンスはMITです。

SebastianBoldt/Jelly

検証環境

今回は下記環境で試しています。

Xcode	8.2.1
Swift	3.0.2
CocoaPods	1.2.0

準備

導入

CocoaPodsで追加します。

platform :ios, '9.0'
use_frameworks!

target 'ここにターゲット名' do
    pod 'Jelly'
end

画面遷移の作成

モーダルでページの遷移を出来るように画面を作っておきます。 Storyboardに呼び出し元と呼び出し先のViewControllerを置きます。呼び出し先の方には閉じるボタンを付けています。

また、呼び出し先の画面にはStoryboardIDを付けておきます。

呼び出し元の方にボタンを配置してタップしたら、呼び出し先画面を表示するようにします。

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    @IBAction func didTapButton(_ sender: Any) {
        let viewController = storyboard?.instantiateViewController(withIdentifier: "SecondView")
        present(viewController!, animated: true, completion: nil)
    }
}

実装

準備が終わったら呼び出し元のコードに追記します。

Jellyをインポートします。

import Jelly

アニメーション用の変数を用意します。

var jellyAnimator: JellyAnimator?

遷移する処理に下記を加えます。

@IBAction func didTapButton(_ sender: Any) {
    let viewController = storyboard?.instantiateViewController(withIdentifier: "SecondView")
    let presentation = JellyFadeInPresentation()
    jellyAnimator = JellyAnimator(presentation:presentation)
    jellyAnimator?.prepare(viewController: viewController!)
    present(viewController!, animated: true, completion: nil)
}

遷移の種類

Jellyでは遷移の種類として下記があります。

• JellyFadeInPresentation()
• JellyShiftInPresentation()
• JellySlideInPresentation()

アニメーションの動きとしてはGithubのReadme.mdにサンプルが載っているので参考にすると良いと思います。

サンプルコード

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    @IBAction func didTapButton(_ sender: Any) {
        let viewController = storyboard?.instantiateViewController(withIdentifier: "SecondView")
        let presentation = JellyFadeInPresentation()
        jellyAnimator = JellyAnimator(presentation:presentation)
        jellyAnimator?.prepare(viewController: viewController!)
        present(viewController!, animated: true, completion: nil)
    }
}

実行結果

JellyFadeInPresentationを選んでいるのでふわっとしたトランジションです。

カスタマイズについて

Jellyでは遷移のカスタマイズをすることが出来ます。たとえば、

let presentation = JellyFadeInPresentation()

の部分を

let presentation = JellyFadeInPresentation(dismissCurve: .easeInEaseOut,
                                presentationCurve: .easeIn,
                                cornerRadius: 6,
                                backgroundStyle: .blur(effectStyle: .light),
                                duration: .medium,
                                widthForViewController: .fullscreen,
                                heightForViewController: .halfscreen,
                                marginGuards: .zero,
                                corners: .allCorners)

とすると、以下のようになります。

種類によって設定できるものは異なりますが、Readme.mdを見るとプロパティとしては以下のものがある様です。

プロパティ名	説明	値	デフォルト値
duration	遷移アニメーションの時間	.ultraSlow = 2.0 .slow = 1.0 .medium = 0.5 .normal = 0.35 .fast = 0.2 .reallyFast = 0.1	normal
backgroundStyle	背景のスタイル	.dimmed(alpha: CGFloat) .blur(effectStyle: UIBlurEffectStyle) ※ 透明な背景を使いたい場合は　.dimmed(alpha:0.0)にする	.dimmed(0.5)
cornerRadius	遷移先画面の角丸	Double	0
corners	角丸にする位置	UIRectCorner	.allCorners
presentationCurve dismissCurve	アニメーションカーブ	.easeIn .easeOut .easeInEaseOut .linear	.linear
isTapBackgroundToDismissEnabled	背景（透過部分）タップで閉じるかどうか	true = 閉じる false = 閉じない	true
widthForViewController heightForViewController	画面サイズ	.fullscreen = 全画面 .halfscreen = 半分のサイズ .custom(value: CGFloat)	.fullscreen
horizontalAlignment	画面の横位置	.center .left .right	.center
verticalAlignemt	画面の縦位置	.center .top .bottom	.center
marginGuards	余白	UIEdgeInsets	.zero
directionShow directionDismiss	アニメーションの方向	.left .top .bottom .right	.top
jellyness	ゼリー？	.none (damping = 1.0, velocity = 0.0) .jelly (damping = 0.7, velocity = 2) .jellier (damping = 0.5 , velocity = 3) .jelliest (damping = 0.2, velocity = 4)	.none

さいごに

遷移する際にコードを追加するだけで遷移のアニメーションが変えられるのは便利ではないでしょうか。個人的にはデザインをカスタマイズしたアラート画面を作ったりする時に活用できそうな気がしました。